<style lang="less" scoped>
.index {
  background: #f8f8f9;
}
.loading {
  animation: myloading 1s linear infinite;
  margin-top: 100px;
}
@keyframes myloading {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.card {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.submit_btn {
  width: 200px;
  margin: 20px auto;
}
.form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
</style>

<template>
  <div id="index">
    <myheader></myheader>
    <Layout :style="bg" id="content">
      <Layout :style="{padding: '24px 24px'}">
        <Form :label-width="80">
          <FormItem label="知识点标题" prop="title">
            <Input v-model="title" placeholder="请输入知识点标题"></Input>
          </FormItem>
          <div ref="editor" style="text-align:left"></div>
          <!-- <FormItem style="margin-top : 50px">
            <div>布鲁姆认知层次</div>
            <Select v-model="bloom" style="width:200px">
              <Option :value="1">记忆</Option>
              <Option :value="2">理解</Option>
              <Option :value="3">应用</Option>
              <Option :value="4">分析</Option>
              <Option :value="5">综合</Option>
              <Option :value="6">评价和创造</Option>
            </Select>
          </FormItem>
          <div>该知识点的配题的题干</div>
          <div ref="question_editor" style="text-align:left"></div>

          <FormItem style="margin-top : 50px">
            <div>题型</div>
            <Select v-model="question.type" style="width:200px">
              <Option value="panduan" key="panduan">判断</Option>
              <Option value="xuanze" key="xuanze">选择</Option>
              <Option value="jianda" key="jianda">简答</Option>
            </Select>
          </FormItem>

          <FormItem v-if="question.type === 'xuanze'">
            <div class="form">
              <div @click="add_item">
                <Icon type="ios-add-circle-outline"/>
                <a>增加一个选项</a>
              </div>
              <div v-for="(item, key) in question.items" :key="key">
                {{key + 1}}
                <Input
                  style="width: 500px"
                  v-model="question.items[key]"
                  size="large"
                  placeholder="请输入一个新选项"
                />
                <Icon @click="delete_Item(key)" size="15" type="md-close-circle"/>
              </div>
            </div>
          </FormItem>

          <FormItem>
            <div v-if="question.type !== 'jianda'">答案</div>
            <Select
              v-if="question.type === 'xuanze'"
              multiple
              v-model="question.answer"
              style="width:200px"
            >
              <Option v-for="(item, key) in question.items" :key="key" :value="(key+1)+''">{{key+1}}</Option>
            </Select>
            <Select
              v-if="question.type === 'panduan'"
              v-model="question.answer"
              style="width:200px"
            >
              <Option value="yes">对</Option>
              <Option value="no">错</Option>
            </Select>
          </FormItem>

          <div>答案解析</div>
          <div ref="illustration" style="text-align:left"></div> -->
          
          <FormItem>
            <Button
              v-if="$route.params.state === 'new'"
              class="submit_btn"
              type="primary"
              @click="submit()"
            >新建</Button>
            <Button
              v-if="$route.params.state === 'edit'"
              class="submit_btn"
              type="primary"
              @click="modify()"
            >提交修改</Button>
          </FormItem>
        </Form>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import header from "../components/header.vue";
import E from "wangeditor";
import { saveMorePoints, modifyMorePoints } from "../api/api";

export default {
  name: "more_point",
  data: function() {
    return {
      bg: {
        width: `${window.innerWidth}px`,
        height: "auto",
        overflow: "scroll"
      },
      editorContent: "",
      title: "",
    //   bloom: 0,
    //   question: {
    //     question_editor_Content: "",
    //     type: "",
    //     items: [],
    //     answer: "",
    //     illustrationContent: ""
    //   }
    };
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        let content_top = document.getElementById("content").offsetTop;
        this.bg.height = `${window.innerHeight - content_top}px`;
        this.bg.width = `${window.innerWidth}px`;
      })();
    };
    let content_top = document.getElementById("content").offsetTop;
    this.bg.height = `${window.innerHeight - content_top}px`;

    var editor = new E(this.$refs.editor);
    // var question_editor = new E(this.$refs.question_editor);
    // var illustration = new E(this.$refs.illustration);

    editor.customConfig.onchange = html => {
      this.editorContent = html;
    };

    // question_editor.customConfig.onchange = html => {
    //   this.question.question_editor_Content = html;
    // };

    // illustration.customConfig.onchange = html => {
    //   this.question.illustrationContent = html;
    // };

    var url = "";
    if (process.env.NODE_ENV === "development") {
      url = "http://localhost:8080/api/uploadImg";
    } else if (process.env.NODE_ENV === "production") {
      url = "https://www.ourspark.org/api/uploadImg";
    }
    editor.customConfig.uploadImgServer = url; // 上传图片到服务器
    // question_editor.customConfig.uploadImgServer = url;
    // illustration.customConfig.uploadImgServer = url;

    // editor.customConfig.uploadImgHooks = {
    //   // before: function(xhr, editor, files) {
    //   //   // 图片上传之前触发
    //   //   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
    //   //   // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
    //   //   // return {
    //   //   //     prevent: true,
    //   //   //     msg: '放弃上传'
    //   //   // }
    //   // },
    //   success: function(xhr, editor, result) {
    //     // 图片上传并返回结果，图片插入成功之后触发
    //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    //     console.log(result);
    //   }
    //   // fail: function(xhr, editor, result) {
    //   //   // 图片上传并返回结果，但图片插入错误时触发
    //   //   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    //   //   console.log(result)
    //   // },
    //   // error: function(xhr, editor) {
    //   //   // 图片上传出错时触发
    //   //   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    //   // },
    //   // timeout: function(xhr, editor) {
    //   //   // 图片上传超时时触发
    //   //   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    //   // },

    //   // // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
    //   // // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
    //   // customInsert: function(insertImg, result, editor) {
    //   //   // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
    //   //   // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

    //   //   // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
    //   //   // var url = result.url;
    //   //   // insertImg(url);

    //   //   // result 必须是一个 JSON 格式字符串！！！否则报错
    //   // } 
    // };
    editor.customConfig.zIndex = 0;
    // question_editor.customConfig.zIndex = 0;
    // illustration.customConfig.zIndex = 0;
    editor.create();
    // question_editor.create();
    // illustration.create();

    if (this.$route.params.point === undefined) {
      editor.txt.html("<p>请在此输入知识点内容</p>");
    //   question_editor.txt.html("<p>请在此输入配题题干</p>");
    //   illustration.txt.html("<p>请在此输入配题答案解析</p>");
    } else {
      this.title = this.$route.params.point.title;
      editor.txt.html(this.$route.params.point.content);
      this.editorContent = this.$route.params.point.content;

    //   this.bloom = this.$route.params.point.bloom;
    //   question_editor.txt.html(
    //     this.$route.params.point.practice.question_editor_Content
    //   );
    //   this.question.question_editor_Content = this.$route.params.point.practice.question_editor_Content;
    //   this.question.type = this.$route.params.point.practice.type;
    //   this.question.items = this.$route.params.point.practice.items;
    //   this.question.answer = this.$route.params.point.practice.answer;
    //   illustration.txt.html(
    //     this.$route.params.point.practice.illustrationContent
    //   );
    //   this.question.illustrationContent = this.$route.params.point.practice.illustrationContent;
    }
  },
  components: {
    myheader: header
  },
  methods: {
    modify() {
      if (this.title === "") {
        this.$Modal.confirm({
          title: "提示",
          content: "知识点标题不能为空哦！"
        });
      } else if (this.editorContent === "") {
        this.$Modal.confirm({
          title: "提示",
          content: "知识点内容不能为空哦！"
        });
      } else {
        modifyMorePoints({
          menu: this.$route.params.position,
          pointId: this.$route.params.pointId,
          index: 0,
          content: this.editorContent,
          title: this.title
        })
          .then(response => {
            if (response.state === true) {
              this.$Message.success("修改成功");
              this.$router.go(-1);
            } else {
              this.$Message.error("修改失败！ " + response.msg);
            }
          })
          .catch(error => {
            this.$Message.error(error.status);
          });
      }
    },
    submit() {
      if (this.title === "") {
        this.$Modal.confirm({
          title: "提示",
          content: "知识点标题不能为空哦！"
        });
      } else if (this.editorContent === "") {
        this.$Modal.confirm({
          title: "提示",
          content: "知识点内容不能为空哦！"
        });
      } else {
        saveMorePoints({
          pointId: this.$route.params._id,
          menu: this.$route.params.position,
          seq: parseInt(this.$route.params.seq),
          index: 0,
          content: this.editorContent,
          title: this.title
        })
          .then(response => {
            if (response.state === true) {
              this.$Message.success("提交成功");
              this.$router.go(-1);
            } else {
              this.$Message.error("提交失败！ " + response.msg);
            }
          })
          .catch(error => {
            this.$Message.error(error.status);
          });
      }
    }
  }
};
</script>